<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <div style="float: left;">
          <el-input
            v-model="query.blurry"
            clearable
            placeholder="输入 院系名称/原院系名称/专业名称 搜索"
            style="width: 300px;"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          />
        </div>
        <rrdOperation />
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      stripe
      height="600"
      :data="crud.data"
      style="width: 100%;"
      :row-class-name="rowClassName"
    >
      <el-table-column prop="id" label="序号" width="70" />
      <el-table-column prop="college" label="院系名称" />
      <el-table-column prop="enterDate" label="年份" width="80" />
      <el-table-column prop="oldCollegeName" label="院系原名称" width="200" />
      <el-table-column prop="major" label="专业" width="160" />
      <el-table-column prop="count" label="总数" width="80" />
      <el-table-column prop="unverifyCount" label="待认证数" width="90" />
      <el-table-column prop="verifyPassCount" label="认证通过数" width="90" />
      <el-table-column prop="verifyUnPassCount" label="认证未通过数" width="100" />
      <el-table-column prop="verifingCount" label="认证待审核数" width="100" />
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudCollegeStatistics from '@/api/anniversary/collegeStatistics'
import { mapGetters } from 'vuex'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrdOperation from '@crud/RRD.operation'
import pagination from '@crud/Pagination'

export default {
  components: { rrdOperation, pagination },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({
      title: '院系统计详情',
      url: '/api/college/detail',
      sort: ['college,asc', 'enterDate,asc', 'major,asc'],
      crudMethod: { ...crudCollegeStatistics
      },
      queryOnPresenterCreated: false
    })
  },
  data() {
    return {
      collegeAdmin: false,
      college: '',
      blurry: '',
      permission: {
        del: ['admin', 'collegeStatistics:list']
      }
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    for (var i = 0; i < this.user.roles.length; i++) {
      if (this.user.roles[0].name === '学院管理员') {
        this.college = this.user.dept.name
        this.collegeAdmin = true
      } else {
        this.college = ''
      }
    }
    this.queryData()
  },
  methods: {
    queryData() {
      if (this.collegeAdmin) {
        this.crud.query.college = this.college
      }
      this.crud.toQuery()
    },
    rowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row.id
      row.id = rowIndex + 1
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	/deep/ .el-input-number .el-input__inner {
		text-align: left;
	}
</style>
